<template>
  <div class="rolesPage">
    <page-template>
      <div slot="title">
        {{ title }}
      </div>
      <div slot="headerRight">
        <el-button type="success" @click="handlerCommand(Type.Create)">
          {{ createBtnText }}
        </el-button>
      </div>
      <div slot="content" class="content">
        <search-template
          ref="search"
          :search-params="searchOptions"
          @on-reset="onReset"
          @on-search="onSearch"
          @on-filter="onFilter"
        >
        </search-template>
        <crud-template
          ref="table"
          style="margin-top: 20px"
          :loading="tableDataLoading"
          :total="tableDataTotal"
          :table-data="tableData"
          :table-option="tableOptions"
          @pagination-change="onPaginationChange"
        >
          <template #roles="{ row }">
            <el-tag v-for="item in row.roles" :key="item">
              {{ item }}
            </el-tag>
          </template>
          <template #status="{ row }">
            <el-tag :type="row.status | userTagColor">
              {{ row.status | userLabel }}
            </el-tag>
          </template>

          <template #menu="{ row }">
            <dropdown-btn
              :id="row.id"
              :loading="tableDataStatus[row.id].loading"
              :btn-list="dropdownBtns"
              @handler-command="handlerCommand"
            ></dropdown-btn>
          </template>
        </crud-template>
      </div>
    </page-template>
    <create-item ref="form" @on-change="getTableData"></create-item>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import { SelectListModule } from "@/store/modules/selectList";
import PageTemplate from "@/components/PageTemplate/index.vue";
import SearchTemplate from "@/components/SearchTemplate/index.vue";
import CrudTemplate from "@/components/CrudTemplate/index.vue";
import DropdownBtn from "@/components/DropdownBtn/index.vue";
import CreateItem from "./CreateItem.vue";
import { tableOptions } from "./TableOptions";
import { searchOptions } from "./SearchOptions";
import { deleteUser, getUserList } from "@/api/user";
import { UserStatusOptions } from "@/constant/options";
import { setTimeout } from "timers";
import { isNotEmpty } from "@/utils/validate";
import BaseCurd from "@/models/baseCrud";
import ICrud from "@/models/crud";
import { SearchParam } from "@/models/searchParams";
import { TableOptions } from "@/models/tableOptions";
import { Type, DropdownOption } from "@/models/form";

@Component({
  components: {
    PageTemplate,
    SearchTemplate,
    CrudTemplate,
    DropdownBtn,
    CreateItem,
  },
  filters: {
    userLabel: (value: number) => {
      return UserStatusOptions.find((item: any) => item.value === value)?.label;
    },
    userTagColor: (value: number) => {
      return UserStatusOptions.find((item: any) => item.value === value)?.color;
    },
  },
})
export default class Page extends BaseCurd implements ICrud {
  public title = "用户管理";
  public createBtnText = "添加用户";
  public tableOptions: TableOptions = tableOptions;
  public defSearchOptions: SearchParam[] = searchOptions;
  private Type = Type;

  private dropdownBtns: DropdownOption[] = [
    {
      name: "查看用户",
      icon: "el-icon-view",
      command: Type.View,
    },
    {
      name: "编辑用户",
      icon: "el-icon-edit",
      command: Type.Edit,
    },
    {
      name: "删除用户",
      icon: "el-icon-delete",
      command: Type.Delete,
    },
  ];

  private created() {
    SelectListModule.fetchRoleList();
  }

  get searchOptions() {
    const roleItem = this.defSearchOptions.find(
      (item: SearchParam) => item.key === "roleId"
    );
    if (roleItem) roleItem.options = SelectListModule.roleList;
    return this.defSearchOptions;
  }

  async fetchTableData(searchParams: any) {
    console.log("fetchTableData");
    const resp = await getUserList(searchParams);
    console.log("user", resp);
    if (resp.data) {
      this.tableData = resp.data.records;
      this.tableDataTotal = resp.data.total;
      this.tableDataStatus = Object.fromEntries(
        resp.data.records.map((item: any) => [item.id, { loading: false }])
      );
    }
  }

  private async handlerCommand(command: Type, id: number) {
    console.log("handlerCommand", command, id);
    if (command === Type.Delete) {
      this.$confirm("是否确认删除该用户", "提示", {
        type: "warning",
      }).then(() => this.deleteUser(id));
    } else {
      (this.$refs.form as any).open(command, id);
    }
  }

  private async deleteUser(id: number) {
    this.tableDataStatus[id].loading = true;
    try {
      await deleteUser(id);
      this.$message.success("删除成功");
      this.getTableData();
    } finally {
      this.tableDataStatus[id].loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.rolesPage {
  height: 100%;
  .content {
    height: calc(100% - 40px);
  }
}
</style>
